<template>
  <div class="plan">
    <el-card shadow="never" class="planTop">
      <el-row class="search" :gutter="10">
        <el-col :span="10">
          <el-input v-model="inputstr" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2" class="search">
          <el-button
            type="primary"
            plain
            style="width: 100%"
            icon="el-icon-search"
            @click="onSearch"
            >搜索</el-button
          >
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <el-button type="primary" style="width: 100%" @click="planAdd"
            >新增计划</el-button
          >
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="never" class="planCard">
      <el-table :data="plandata" style="width: 100%" stripe border>
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="id" label="计划编号" width="80">
        </el-table-column>
        <el-table-column
          prop="name"
          label="计划名称"
          width="350"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column prop="envName" label="测试环境" width="180">
        </el-table-column>
        <el-table-column prop="caseCount" label="用例数量" width="80">
        </el-table-column>
        <el-table-column prop="excuteCount" label="执行次数" width="80">
        </el-table-column>
        <el-table-column prop="" label="创建时间" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              myDate(scope.row.create_time)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_user" label="创建者" width="80">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="详情"
              placement="top-start"
            >
              <el-button
                type="success"
                icon="el-icon-document"
                circle
                size="mini"
                @click="clickView(scope.row.id)"
              >
              </el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top-start"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                size="mini"
                @click="clickUpdata(scope.row.id)"
              >
              </el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="运行"
              placement="top-start"
            >
              <el-button
                type="primary"
                icon="el-icon-caret-right"
                circle
                size="mini"
                @click="clickRun(scope.row.id)"
              >
              </el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="测试结果"
              placement="top-start"
            >
              <el-button
                type="success"
                icon="el-icon-s-operation"
                circle
                size="mini"
                @click="viewReports(scope.row.id, scope.row.name)"
              >
              </el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top-start"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                size="mini"
                @click="clickDel(scope.row.id)"
              >
              </el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="定时任务"
              placement="top-start"
            >
              <el-button
                :type="setButtonType(scope.row.sched)"
                :icon="setShceButIco(scope.row.sched)"
                circle
                size="mini"
                @click="clickSche(scope.row)"
              >
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        >
        </el-pagination>
      </div>
    </el-card>
    <updatePlanDialog ref="planDlg" />
  </div>
</template>

<script>
import { getPlan, planExcute, updataShced } from "@/network/networks";
import { myDate } from "@/assets/js/common";
import updatePlanDialog from "./planChildrem/updatePlanDialog";
export default {
  components: {
    updatePlanDialog,
  },
  data() {
    return {
      inputstr: "",
      plandata: [],

      //page分页
      currentPage: 1,
      totalCount: 0,
      pageSize: 10,
    };
  },

  mounted() {
    this.getPlan();
  },

  methods: {
    //打开用例添加页面
    planAdd() {
      this.$router.push("/planadd");
    },

    getPlan() {
      getPlan({
        inputstr: this.inputstr,
        pageSize: this.pageSize,
        currentPage: this.currentPage,
      })
        .then((res) => {
          if (res.code == 1) {
            this.plandata = res.data.plans;
            this.totalCount = res.data.totalCount;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    //格式化时间
    myDate(time) {
      return myDate(time);
    },

    onSearch() {
      this.getPlan();
    },

    clickView(rowid) {
      this.$refs.planDlg.able = true;
      this.$refs.planDlg.showDialog = true;
      this.$refs.planDlg.rowid = rowid;
    },

    clickUpdata(rowid) {
      this.$refs.planDlg.able = false;
      this.$refs.planDlg.showDialog = true;
      this.$refs.planDlg.rowid = rowid;
    },

    viewReports(rowid, rowname) {
      //打开计划执行记录页面，传入id与name
      this.$router.push({
        path: "/preoprtlist",
        name: "PRL",
        params: {
          planid: rowid,
          plname: rowname,
        },
      });
    },

    clickDel(rowid) {
      this.$message.success("实现中，请稍等！");
    },

    clickRun(rowid) {
      var row = {};
      row["planid"] = rowid;
      planExcute(row)
        .then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(res.msg);
        });
    },

    //设置每页多少条
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getPlan();
    },

    //切换页数据
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getPlan();
    },

    setButtonType(val) {
      if (val == 1) {
        return "success";
      } else {
        return "warning";
      }
    },

    setShceButIco(val) {
      if (val == 1) {
        return "el-icon-open";
      } else {
        return "el-icon-turn-off";
      }
    },

    clickSche(row) {
      let sche_status = 0;
      if (row.sched == 0) {
        sche_status = 1;
      } else {
        sche_status = 0;
      }
      updataShced({
        id: row.id,
        scheStatus: sche_status,
      }).then((res) => {
        if (res.code == 0) {
          this.$message.error(res.msg);
          return;
        }
        this.$message.success(res.msg);
        this.getPlan();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  bottom: 10px;
}

.planCard {
  margin-top: 15px;
}
</style>